import React, { FC, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
import classNames from 'classnames';

//按钮大小
export enum ButtonSize {
  Large = 'lg',
  Small = 'sm',
}

//按钮类型
// export enum ButtonType {
//   Primary = 'primary',
//   Default = 'default',
//   Danger = 'danger',
//   Link = 'link',
// }

// export type ButtonType = 'primary'|'default'|'danger'|'link'

export type BaseButtonProps = {
  /**
   * 类名
   * @default
   */
  className?: string;
  /**
   * 是否可用
   * @default true
   */
  disabled?: boolean;
  /**
   * 按钮大小
   * @default
   */
  size?: 'lg'|'sm';
  /**
   * 按钮类型
   * @default
   */
  btnType?: 'primary'|'default'|'danger'|'link';
  children: React.ReactNode;
  /**
   * 是否为链接型按钮
   * @default
   */
  href?: string;
};
//联合类型
type NativeButtonProps = BaseButtonProps & ButtonHTMLAttributes<HTMLElement>;

type AnchorButtonProps = BaseButtonProps & AnchorHTMLAttributes<HTMLElement>;
//所有的属性都变成了可选的
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;

export const Button: FC<ButtonProps> = (props) => {
  const {
    /**添加类名 */
    className,
    btnType,
    /**禁用 */
    disabled,
    size,
    children,
    href,
    ...restProps //取出剩余属性
  } = props;
  //btn btn-lg btn-primary
  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    disabled: btnType === 'link' && disabled,
  });

  if (btnType === 'link' && href) {
    return (
      <a className={classes} href={href} {...restProps}>
        {children}
      </a>
    );
  } else {
    return (
      <button className={classes} disabled={disabled} {...restProps}>
        {children}
      </button>
    );
  }
};

Button.defaultProps = {
  disabled: false,
  btnType: 'default',
};

export default Button;
